<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="verify-v1" content="eH3Cbdr8eUT7Zp1sF5yATxGFFHRvM4B6AFl5lVQnmE0=" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<link rel="shortcut icon" href="/svn/favicon.ico"/>
<link rel="icon" href="/svn/favicon.ico" type="image/x-icon" />
<!-- above is common for all pages -->
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-darkness/jquery-ui.css" rel="stylesheet" />	
<!-- above is common for jquery ui pages -->
<script type="text/javascript" src='online_order.js'></script>
<script type="text/javascript" src='manage_order.js'></script>
<script type="text/javascript" src='authsub.js'></script>
<script type="text/javascript" >
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.2");
google.setOnLoadCallback(online_order_init);
</script>
<script type="text/javascript" src="/svn/commonv2.js"></script><!-- must after google.load-->
<title>線上飲料店下單系統</title>
<style type="text/css">
body {
	background: #0F0D0D;
	padding: 30px 0 0 50px;
}
div.sc_menu_wrapper {
	position: relative; 	
	height: 500px;
	/* Make bigger than a photo, because we need a place for a scrollbar. */
	width: 160px;
	
	margin-top: 30px;
	overflow: auto;
  float: left;
}
div.sc_menu {
	padding: 15px 0;
}
.sc_menu a {
	display: block;
	margin-bottom: 5px;
	width: 130px;
	
	border: 5px rgb(79, 79, 79) solid;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;		
	
	/* When image support is turned off */
	color: #fff;
	background: rgb(79, 79, 79);	
}
.sc_menu a:hover {
	border-color: red;
	border-style: dotted;
}
.sc_menu img {
	display: block;
	border: none;
  width: 130px;
  height: 100px;
}

.sc_menu_wrapper .loading {
	position: absolute;
	top: 50px;
	left: 10px;
	
	margin: 0 auto;
	padding: 10px;

	width: 100px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;	
	
	text-align: center;
	color: #fff;
	border: 1px solid rgb(79, 79, 79);
	background: #1F1D1D;
}
/* Styling tooltip */
.sc_menu_tooltip {
	display: block;
	position: absolute;
  top: 15px;
  left: 55px;
	
  height: 32px;
  width: 300px;
	padding: 3px;
	font-size: 28px;	
	color: #fff;
	
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;	
	
	border: 1px solid rgb(79, 79, 79);
	background: rgb(0, 0, 0);
	/* Make background a bit transparent for browsers that support rgba */	
	background: rgba(0, 0, 0, 0.5);
}

.sc_item_detail {
	padding: 5px;
	display: block;
  float: right;
  width: 270px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;	
  height: 300px;
	background: black;
	color: #fff;
	text-align: center;
}

.sc_item_detail h3 {
  font-size: 20px;
}

.sc_item_detail p {
  font-size: 14px;
}

.sc_item_form {
	padding: 5px;
	display: block;
  float: left;
  width: 300px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;	
  height: 300px;
	background: black;
	color: #fff;
  font-size: 16px;
}

.sc_item_table{
	padding: 10px;
  clear: both;
  width: 580;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;	
  height: 270px;
	background: black;
}
#main_panel{
	background: #2F2F2F;
  float: left;
	width: 600px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;	
	height: 600px;
	padding: 5px;
}

input  {font-size: 20px; padding: 5px}
select {font-size: 20px; padding: 5px}

</style>
</head>
<body>

<div id="cat1-menu-div" class="sc_menu_wrapper">
	<div class="loading">載入總類中...</div>
</div>
<div id="cat2-menu-div" class="sc_menu_wrapper">
	<div class="loading">請選分類...</div>
</div>
<div id="main_panel"> 
  <div class='sc_item_form'>
    <form id='order_form'>
      <input type='text' class="text ui-widget-content ui-corner-all"
        type="text" name="product_name" value='茉莉綠茶' spec='M:15,L:20' readonly/>
      <br/>
      <select class="text ui-widget-content ui-corner-all" name='sweet'>
        <option>正常甜(標準)</option>
        <option>不要太甜(9分甜)</option>
        <option>少糖(7分甜)</option>
        <option>半糖(5分甜)</option>
        <option>微糖(1/4甜)</option>
        <option>無糖(健康)</option>
      </select>
      <br/>
      <select class="ui-widget-content ui-corner-all" name='ice'>
        <option>正常冰</option>
        <option>少冰</option>
        <option>去冰</option>
      </select>
      <br/>
      <select class="ui-widget-content ui-corner-all" name='size'>
        <option spec='M'>中杯</option>
        <option spec='L'>大杯</option>
      </select>
      <label>數量</label>
      <input type='text' class="text ui-widget-content ui-corner-all"
      type="text" name="quantity" value="1" size='4'/>
      <br/>
      <label>單價</label>
      <input type='text' class="text ui-widget-content ui-corner-all"
      type="text" name="price" value="15" size='4' readonly/>
      <br/>
      <input type='button' name='add_item'  value='加入訂單'/>
      <input type='button' name='remove_last' value='移去一筆'/>
      <input type='button' name='clear_order' value='重置訂單'/>
      <input type='button' name='send_order' value='送出訂單'/>
      <br/>
    </form>
  </div> 
  <div class='sc_item_detail'>
    <h3>尚未選擇商品</h3>
  </div> 
  <div class='sc_item_table'>
    <div class="ui-widget">
      <table id="order_table" class="ui-widget ui-widget-content" width='590'>
        <thead>
          <tr class="ui-widget-header">
            <th>品名</th>
            <th>容量</th>
            <th>數量</th>
            <th>甜度</th>
            <th>冰量</th>
            <th>小計</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
    </div>
  </div> 
</div>
<div id="dialog" title="確認訂單OK了嗎?">
  <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;">
  </span>這個訂單會被送出，請確認無誤</p>
  <div></div>
</div>
<div id='tooltip' class="sc_menu_tooltip"></div>
</body>
</html>
